<template>
	<view :class="isDark?'darkBg':''">
		<cu-custom :bgColor="isDark?'bg-black':'bg-purple'" isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">用户设置</block>
		</cu-custom>
		<!-- <view style="height: 545rpx; background-size: cover;  background-position: center;"
			:style="{backgroundImage:isDark?'url(https://web.cloudduolc.cn/image/adblack7.png)':'url(https://web.cloudduolc.cn/image/adwhite5.png)'}">
			<ad unit-id="adunit-8f5833c88a4b6a95" ad-type="video" :ad-theme="isDark?'black':'white'"></ad>
		</view> -->
		<view :class="isDark?'dark':''">

			<view>
				<view style="height: 20rpx;"></view>
				<view style="display: flex;padding-bottom: 20rpx;" class="settingView">
					<p class="settingViewFont">外观设置</p>
					<picker @change="bindPickerChange" :value="index" :range="styleList">
						<view style="margin-right: 110rpx;margin-top: 17rpx;font-size: 28rpx;">{{styleList[index]}}
						</view>
					</picker>
					<image src="../../static/my/right.png" class="rightIcon"></image>
				</view>

			</view>

			<view>
				<view style="height: 20rpx;"></view>
				<view style="display: flex;padding-bottom: 20rpx;" class="settingView">
					<p class="settingViewFont">快速启动设置</p>
					<picker @change="bindPickerChangeQuick" :value="quickIndex" :range="quickList">
						<view style="margin-right: 110rpx;margin-top: 17rpx;font-size: 28rpx;">{{quickList[quickIndex]}}
						</view>
					</picker>
					<image src="../../static/my/right.png" class="rightIcon"></image>
				</view>

			</view>

			<view>
				<view style="height: 20rpx;"></view>
				<view style="display: flex;padding-bottom: 20rpx;" class="settingView">
					<p class="settingViewFont">公告推送设置</p>
					<picker @change="bindPickerChangeNotice" :value="noticeIndex" :range="noticeList">
						<view style="margin-right: 110rpx;margin-top: 17rpx;font-size: 28rpx;">
							{{noticeList[noticeIndex]}}
						</view>
					</picker>
					<image src="../../static/my/right.png" class="rightIcon"></image>
				</view>

			</view>
			<view >
				<view style="height: 20rpx;"></view>
				<view style="display: flex;padding-bottom: 20rpx;" class="settingView">
					<p class="settingViewFont">水印设置</p>
					<picker @change="bindPickerChangewatermark" :value="watermarkIndex" :range="watermarkList">
						<view style="margin-right: 110rpx;margin-top: 17rpx;font-size: 28rpx;">
							{{watermarkList[watermarkIndex]}}
						</view>
					</picker>
					<image src="../../static/my/right.png" class="rightIcon"></image>
				</view>

			</view>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''" style="margin-top: 100rpx;"
			>
			<view class="cu-dialog">
				<view class="cu-bar  justify-end " :class="isDark?'dark':'bg-white'">
					<view class="content">提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close " :class="isDark?'text-white':'text-black'"></text>
					</view>
				</view>
				<view class="padding-sm" :class="isDark?'dark':'bg-white'">
			当前功能为VIP功能，关注与小程序同名的公众号即可获得权限。
				</view>
				<image src="https://web.cloudduolc.cn/image%2Fgzhewm.jpg" style="height: 640rpx;" />
				<view class="cu-bar justify-end" :class="isDark?'dark':'bg-white'"
					v-if="Notice.showButton!='false'">
					<!-- <view class="action">
						<button class="cu-btn bg-white margin-left" @tap="allHideModal">{{Notice.button}}</button>
					</view> -->
				</view>
				<!-- <view class="cu-bar  justify-end " :class="isDark?'dark':'bg-white'"
					v-if="Notice.showButton=='false'">
					<view class="content"></view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close " :class="isDark?'text-white':'text-black'"></text>
					</view>
				</view> -->
			</view>
		</view>
		<zmm-watermark>

		</zmm-watermark>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				styleList: ['普通模式', '深夜模式'],
				quickList: ['主页', '课表页面', '情侣课表页面'],
				noticeList: ['更新就提示一次', '永远不提示'],
				watermarkList: ['显示水印', '去除水印'],
				index: 0,
				quickIndex: 0,
				noticeIndex: 0,
				watermarkIndex: 0,
				isDark: this.isDark,
				waterMarkState: 'false',
				isVIP: false,
				modalName: null,
				isDark: this.isDark,
			}
		},
		onLoad() {
			let _this = this
			var showStyle = _this.$store.state.showStyle;
			if (showStyle == 1) {
				this.index = showStyle
			}
			if (_this.$store.state.quickIndex != null) {
				var quickIndex = _this.$store.state.quickIndex;
				this.quickIndex = quickIndex
			}
			if (_this.$store.state.noticeIndex != null) {
				var noticeIndex = _this.$store.state.noticeIndex;
				this.noticeIndex = noticeIndex
			}
			if (_this.$store.state.watermarkIndex != null) {
				var watermarkIndex = _this.$store.state.watermarkIndex;
				this.watermarkIndex = watermarkIndex
			}
			const userInfo = _this.$store.state.userInfo
			if (userInfo.isVIP) {
				if (userInfo.isVIP == 'true') {
					_this.isVIP = true
				}
			}
		},
		onShow() {
			let _this = this

		},
		methods: {
			showModal() {
				this.modalName = 'DialogModal'
			},
			hideModal(e) {
				this.modalName = null
			},
			bindPickerChange: function(e) {
				let _this = this
				console.log('picker发送选择改变，携带值为', e.target.value)
				if(!_this.isVIP){
					uni.showModal({
						title: '提示',
						content: '目前该功能只针对免费VIP开放，如想成为免费VIP可前往【个人界面】查看',
						confirmText: '跳转',
						cancelText: '关闭',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.switchTab("/pages/user/index")
							} else if (res.cancel) {
					
							}
						}
					});
					return
				}
				_this.index = e.target.value
				_this.$store.commit("showStyle", _this.index)
				uni.showModal({
					title: '提示',
					showCancel: false,
					content: '已经切换成功，重启程序即可。',
					success: function(res) {

						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			bindPickerChangeQuick: function(e) {
				let _this = this
				console.log('picker发送选择改变，携带值为', e.target.value)
				if(!_this.isVIP){
					uni.showModal({
						title: '提示',
						content: '目前该功能只针对免费VIP开放，如想成为免费VIP可前往【个人界面】查看',
						confirmText: '跳转',
						cancelText: '关闭',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.switchTab("/pages/user/index")
							} else if (res.cancel) {
					
							}
						}
					});
					return
				}
				_this.quickIndex = e.target.value
				_this.$store.commit("quickIndex", _this.quickIndex)
				uni.showModal({
					title: '提示',
					showCancel: false,
					content: '已经切换成功，重启程序即可。',
					success: function(res) {

						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			bindPickerChangeNotice: function(e) {
				let _this = this
				console.log('picker发送选择改变，携带值为', e.target.value)
				if(!_this.isVIP){
					uni.showModal({
						title: '提示',
						content: '目前该功能只针对免费VIP开放，如想成为免费VIP可前往【个人界面】查看',
						confirmText: '跳转',
						cancelText: '关闭',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.switchTab("/pages/user/index")
							} else if (res.cancel) {
					
							}
						}
					});
					return
				}
				_this.noticeIndex = e.target.value
				_this.$store.commit("noticeIndex", _this.noticeIndex)
				uni.showModal({
					title: '提示',
					showCancel: false,
					content: '已经切换成功，重启程序即可。',
					success: function(res) {

						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			bindPickerChangewatermark: function(e) {
				let _this = this
				console.log('picker发送选择改变，携带值为', e.target.value)
				if(!_this.isVIP){
					uni.showModal({
						title: '提示',
						content: '目前该功能只针对免费VIP开放，如想成为免费VIP可前往【个人界面】查看',
						confirmText: '跳转',
						cancelText: '关闭',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.switchTab("/pages/user/index")
							} else if (res.cancel) {
					
							}
						}
					});
					return
				}
				_this.watermarkIndex = e.target.value
				_this.$store.commit("watermarkIndex", _this.watermarkIndex)
				
				uni.showModal({
					title: '提示',
					showCancel: false,
					content: '已经切换成功，重启程序即可。',
					success: function(res) {

						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
	}
</script>

<style>
	page {
		background-color: white;
	}

	.settingView {
		margin-top: 50rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
		box-shadow: 0 4rpx 18rpx rgba(181, 186, 193, 0.2);
		width: 90%;
		border-radius: 30rpx;
	}

	.leftIcon {
		width: 80rpx;
		height: 80rpx;
	}

	.rightIcon {
		width: 30rpx;
		height: 30rpx;
		margin-top: 20rpx;
	}

	.settingViewFont {
		display: flex;
		flex: 1;
		margin-top: 15rpx;
		margin-left: 25rpx;
	}
</style>
